
// Windows || Linux
@media platform != "OSX" 
{
  html { 
    var(accent-color): window-accent-color; 
    var(text-color): #000; 
    border: window-frame-width solid transparent; 
  }

  html:theme(dark) {
    var(text-color): #fff; 
  }

  html:owns-focus {
    border-color: morph(color(accent-color), opacity:50%);   
  }

  html > window-header { 
    display:block; 
    width:*; 
    flow:horizontal; 
    height:window-caption-height; 
    margin:0; 
    font:system;
  } 
  html > window-header > window-caption { display:block; line-height:window-caption-height; width:*; padding:0 1em; color:color(text-color); }
  html > window-header > window-buttons { display:block; flow:horizontal; width:max-content; height:*; }
  html > window-header > window-buttons > window-button { 
    behavior:clickable; 
    display:block; 
    height:*; 
    width:window-button-width; 
    foreground-size: 11dip;
    foreground-repeat: no-repeat;
    foreground-position:50% 50%;
    stroke:color(text-color);
    stroke-width:1dip;
    transition: background-color linear 100ms;
  }
  html > window-header > window-buttons > window-button:hover { 
    background:rgba(0,0,0,0.25);   
  }
  html > window-header > window-buttons > window-button[role="window-close"] { stroke-width:1.44dip; foreground-image: url(path:M0 0 L10 10 M10 0 L0 10); }
  html > window-header > window-buttons > window-button[role="window-close"]:hover { background:rgb(232,17,35); stroke:#fff; }

  html > window-header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 0 H10 V10 H0 Z); }

  html[window-state="maximized"] { border-color:transparent; }
  html[window-state="maximized"] > window-header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 2 h8 v8 h-8 Z M2 2 v-2 h8 v8 h-2); }
  html[window-state="full-screen"] { border-width:0; }

  html > window-header > window-buttons > window-button[role="window-minimize"] { foreground-image: url(path:M0 0 M0 5 H10 M10 10); }

  html > window-header > window-icon {
    display:block;
    height:*; 
    width:24px;
    foreground: no-repeat 50% 50%;
    foreground-size: 16px 16px;
    // awesome:cubes
    foreground-image: url(path:M384 1632l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm1088 454l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm-448-293l384-165v-266l-384 164v267zm-64-379l441-189-441-189-441 189zm1088 518v416q0 36-19 67t-52 47l-448 224q-25 14-57 14t-57-14l-448-224q-5-2-7-4-2 2-7 4l-448 224q-25 14-57 14t-57-14l-448-224q-33-16-52-47t-19-67v-416q0-38 21.5-70t56.5-48l434-186v-400q0-38 21.5-70t56.5-48l448-192q23-10 50-10t50 10l448 192q35 16 56.5 48t21.5 70v400l434 186q36 16 57 48t21 70z);
    fill: red;
  }
}

@media platform == "OSX" {
  html { 
    var(accent-color): window-accent-color; 
  }

  html > window-header { width:*; }

  html > window-header { width:*; height:window-caption-height; margin:0; } 
  html > window-header > window-caption { display:block; line-height:window-caption-height; width:*; margin-left:3em; text-align:center;}
  html > window-header > window-buttons { display:none; /*macosx will draw its own chrome buttons */ }
}

html[window-blurbehind] {
  background:transparent;
}
